<template>
    <div class="logMain">
        <div class="buttons">
            <el-button type="danger" size="small" @click="deleteLogs" style="margin-left:10px;margin-top: 10px" icon="el-icon-delete">删除</el-button>
        </div>
        <el-table
                ref="logTable"
                :data="logData"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户"
            >
            </el-table-column>
            <el-table-column
                    prop="method_name"
                    label="访问方法名"
            >
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="用户行为描述"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="created_at"
                    label="用户访问时间"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <div class="pager">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import moment from "moment";
    @Component({
        components:{
        }
    })
    export default class OrderList extends Vue {
        public searchText="";
        public isShowAddDialog=false;
        public total:number=0;
        public pageSize=10;
        public curPage=1;
        public logData:any=new Array<any>();
        async created(){
            await this.initPageData();
        }
        public async initPageData(){
            let logs=await AdminApiActions.listUserLogs({pageSize:this.pageSize,curPage:this.curPage});
            logs.data.result.forEach(item=>{
                item.created_at=moment(item.created_at).format("YYYY-MM-DD HH:mm");
                item.updated_at=moment(item.updated_at).format("YYYY-MM-DD HH:mm");
            });
            this.logData=logs.data.result;
            this.total=logs.data.total;
        }
        public async search(){

        }
        public async handleSizeChange(pageSize){
            this.pageSize=pageSize;
            await this.initPageData();
        }
        public async handleCurrentChange(curPage){
            this.curPage=curPage;
            await this.initPageData();
        }
        //删除用户选中订单
        public async deleteLogs(){
            let logTable:any=this.$refs.logTable;
            let selectData:Array<any>=logTable.selection;
            let ids:Array<any>=new Array<any>();
            selectData.forEach(item=>{
                ids.push(item.id);
            });
            this.curPage=1;
            await AdminApiActions.deleteUserLogs({ids:ids});
            await this.initPageData();
        }

    }
</script>
<style lang="less">
    .logMain{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .pager{
            height: 60px;
            background-color: white;
            display: flex;
            align-items: center;
        }
    }

</style>
